<template>
  <view class="search-container">
    <view class="search-header">
      <u-search 
        v-model="searchKeyword" 
        placeholder="搜索洗车点/套餐" 
        :show-action="true" 
        action-text="取消"
        @search="handleSearch"
        @custom="cancelSearch"
      ></u-search>
    </view>
    
    <view class="search-history" v-if="!searchKeyword && searchHistory.length > 0">
      <view class="history-header">
        <text class="title">搜索历史</text>
        <u-icon name="trash" size="24" color="#999" @click="clearHistory"></u-icon>
      </view>
      
      <view class="history-tags">
        <u-tag 
          v-for="(item, index) in searchHistory" 
          :key="index" 
          :text="item" 
          type="info" 
          plain 
          size="mini" 
          @click="searchFromHistory(item)"
        />
      </view>
    </view>
    
    <view class="search-results" v-if="searchKeyword">
      <!-- 搜索结果 - 洗车点 -->
      <view class="result-section">
        <view class="section-title">
          <u-icon name="map" size="24" color="#007aff"></u-icon>
          <text class="title">洗车点</text>
        </view>
        
        <view 
          class="device-item" 
          v-for="device in deviceResults" 
          :key="device.id"
          @click="goToDevice(device)"
        >
          <view class="device-main">
            <view class="device-info">
              <text class="device-name">{{ device.name }}</text>
              <text class="device-location">{{ device.location }}</text>
            </view>
            <u-tag :text="getStatusText(device.status)" :type="getStatusType(device.status)" size="mini" />
          </view>
        </view>
      </view>
      
      <!-- 搜索结果 - 套餐 -->
      <view class="result-section">
        <view class="section-title">
          <u-icon name="gift" size="24" color="#ff9900"></u-icon>
          <text class="title">套餐</text>
        </view>
        
        <view 
          class="package-item" 
          v-for="pkg in packageResults" 
          :key="pkg.id"
          @click="goToPackage(pkg)"
        >
          <view class="package-header">
            <text class="package-name">{{ pkg.name }}</text>
            <u-tag :text="pkg.tag" type="warning" size="mini" />
          </view>
          <view class="package-price">
            <text class="price">¥{{ pkg.price }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="empty-results" v-if="searchKeyword && deviceResults.length === 0 && packageResults.length === 0">
      <u-empty 
        mode="search" 
        text="暂无搜索结果" 
        icon="http://cdn.uviewui.com/uview/empty/search.png"
        marginTop="100"
      >
      </u-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 搜索关键词
const searchKeyword = ref('')

// 搜索历史
const searchHistory = ref(['朝阳洗车', '标准套餐', '国贸洗车点', '深度清洁'])

// 设备搜索结果
const deviceResults = ref([
  {
    id: 'D001',
    name: '朝阳门店1号洗车机',
    location: '朝阳区建国路88号',
    status: 'available'
  },
  {
    id: 'D003',
    name: '国贸店3号洗车机',
    location: '朝阳区国贸大厦',
    status: 'available'
  }
])

// 套餐搜索结果
const packageResults = ref([
  {
    id: 'P001',
    name: '标准洗车套餐',
    tag: '热销',
    price: 15
  },
  {
    id: 'P002',
    name: '深度清洁套餐',
    tag: '推荐',
    price: 25
  }
])

// 处理搜索
const handleSearch = () => {
  if (searchKeyword.value) {
    // 添加到搜索历史（去重）
    if (!searchHistory.value.includes(searchKeyword.value)) {
      searchHistory.value.unshift(searchKeyword.value)
      // 限制历史记录数量
      if (searchHistory.value.length > 10) {
        searchHistory.value.pop()
      }
    }
    
    // 模拟搜索结果更新
    uni.showToast({ title: `搜索: ${searchKeyword.value}`, icon: 'none' })
  }
}

// 取消搜索
const cancelSearch = () => {
  uni.navigateBack()
}

// 从历史记录搜索
const searchFromHistory = (keyword: string) => {
  searchKeyword.value = keyword
  handleSearch()
}

// 清空历史记录
const clearHistory = () => {
  uni.showModal({
    title: '确认清空',
    content: '确定要清空搜索历史吗？',
    success: (res) => {
      if (res.confirm) {
        searchHistory.value = []
      }
    }
  })
}

// 跳转到设备详情
const goToDevice = (device: any) => {
  uni.navigateTo({ 
    url: `/pages/device/control?id=${device.id}` 
  })
}

// 跳转到套餐详情
const goToPackage = (pkg: any) => {
  uni.showToast({ title: `查看套餐: ${pkg.name}`, icon: 'none' })
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    available: '空闲',
    occupied: '使用中',
    maintenance: '维护中',
    offline: '离线'
  }
  
  return statusMap[status] || status
}

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    available: 'success',
    occupied: 'warning',
    maintenance: 'error',
    offline: 'info'
  }
  
  return typeMap[status] || 'info'
}
</script>

<style lang="scss" scoped>
.search-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-header {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.search-history {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }
}

.result-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-left: 10rpx;
    }
  }
  
  .device-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    .device-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .device-info {
        .device-name {
          font-size: 30rpx;
          color: #333;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .device-location {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .package-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    .package-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;
      
      .package-name {
        font-size: 30rpx;
        color: #333;
      }
    }
    
    .package-price {
      .price {
        font-size: 32rpx;
        font-weight: bold;
        color: #ff6600;
      }
    }
    
    &:last-child {
      border-bottom: none;
    }
  }
}

.empty-results {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}
</style>